<template>
	<view class="padding-tb-sm">
		<use-navbar title="关注列表"></use-navbar>
		
		<view class="margin-lr padding bg-main border-radius margin-bottom-sm" v-for="(item, idx) in datas" :key="idx" @click="toUser(item)">
			<view class="dflex-b">
				<view class="dflex flex1">
					<view class="dflex-c">
						<image :src="item.notep_headimg || '/static/images/user/default.png'" class="border-radius-lg margin-right-sm headimg" 
							style="width: 70rpx; height: 70rpx;" mode="aspectFill"></image>
					</view>
					<view class="fwb">
						{{item.notep_name || appabbr || '图腾'}}
					</view>
				</view>
				<view class="border-radius-lg fs-xs" style="border: 1rpx solid #333; padding: 12rpx 34rpx;" @click.stop="toOper(item)">
					{{ iself ? (item.follow ? '取消关注' : '加关注') : '去查看' }}
				</view>
			</view>
		</view>
		
		<!-- 空白页 -->
		<use-empty-emoji v-if="isload && !datas.length" e-style="round" e-type="note" tip=" " btn-tip="去逛逛" height="80vh" @to="toHome"></use-empty-emoji>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		computed: {
			...mapState(['member', 'islogin']),
			appabbr() {
				return this.$config.appabbr;
			}
		},
		data() {
			return {
				uid: '',
				datas: [],
				iself: false,
				isload: false,
				isfollow: false
			};
		},
		onLoad(res) {
			this.uid = this.member._id;
			if (res.uid) {
				this.uid = res.uid;
			}
			
			this.loadData();
		},
		methods: {
			loadData() {
				
				this.isload = false;
				this.$func.usemall.call('shopping/myFollow', { id: this.uid }).then(res => {
					console.log('myfollow', res);
					this.isload = true;
					if (res.code == 200) {
						res.datas.forEach(x => {
							// 已关注
							x.follow = true;
						})
						this.datas = res.datas;
						this.iself = res.result.iself;
						return;
					}
					
					this.$api.msg(res.msg);
				});
			},
			toUser(item) {
				uni.navigateTo({
					url: '/sub-shopping/pages/user?id=' + item._id
				})
			},
			toOper(item) {
				if (!this.iself) {
					this.toUser(item);
					return;
				}
				
				if (this.isfollow) return;
				this.isfollow = true;
				
				uni.showLoading({
					title: '请求中'
				});
				
				let url = 'shopping/follow';
				this.$func.usemall.call(url, { id: item._id }).then(res => {
					console.log('toFollow', url, res);
					
					uni.hideLoading();
					this.isfollow = false;
					if (res.code == 200) {
						item.follow = res.datas.follow;
						this.$api.msg(item.follow ? '关注成功' : '取消成功');
						return;
					}
					
					this.$api.msg(res.msg);
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/tabbar/shopping'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F5F5F5;
}
</style>
